/**
* @description: 工单审批 ==> 审批列表 ==> 审批详情
* @author: webrussell
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="审批详情" @goBack="goBack"/>
    <view class="main-container">
      <!--基本信息-->
      <plateTitle title="基本信息" class="plate-title-1"/>
      <view class="base-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in baseInfoData" :key="index" :title="item.title" :value="item.value"/>
        </van-cell-group>
      </view>
      
      <!--审批进度-->
      <plateTitle title="审批进度" class="plate-title-2">
        <div class="plate-title-right" v-if="approvalData.taskState === '-1' || approvalData.taskState === '0'">
          {{ approvalData.taskStateName }}
        </div>
      </plateTitle>
      <view class="approval-info-container">
        <van-steps direction="vertical"
                   :active="approvalActive"
                   active-color="#417adc"
                   inactive-color="#417adc"
                   active-icon="circle"
                   inactive-icon="circle">
          <van-step>
            <p><span>{{ approvalData.operName }}</span><span>发起人</span></p>
            <p style="color: #417adc">发起审批</p>
            <p>{{ approvalData.receiveTime }}</p>
          </van-step>
          <van-step>
            <p><span>{{ approvalData.approvalOperName }}</span><span>审批人</span></p>
            <p :style="{color: approvalColor()}">{{ approvalData.approvalStateName }}</p>
            <p>{{ approvalData.approvalTime }}</p>
            <p class="opinion" v-if="approvalData.approvalState !== '0'">
              <span>审批意见：</span>
              <span>{{ approvalData.approvalRemark }}</span>
            </p>
          </van-step>
        </van-steps>
      </view>
  
      <!--按钮-->
      <van-button block @click="confirm" v-if="showButton">审批</van-button>
    </view>

    <!-- 弹出审批页 -->
    <van-popup 
      closeable
      :close-on-click-overlay="false"
      v-model="showApproval" 
      position="bottom"
    >
      <Approval @submitApproval="submitApproval"></Approval>
    </van-popup>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from "../../../components/business/plateTitle";
import Approval from '../../common/approval.vue'
import moment, { unix } from "moment";
import {mapGetters} from "vuex";
import {Dialog} from "vant";

export default {
  name: "approvalDetail",
  components: {navBar, plateTitle, Approval},
  data() {
    return {
      baseInfoData: [],
      approvalData: {},
      showButton:true,
      approvalActive: 0,
      showApproval: false,
      approvalColor: () => {
        // if (this.approvalData.approvalState === "发起审批") return "#417ADC";
        if (this.approvalData.approvalState === "1") return "#41DC83"; // 通过
        if (this.approvalData.approvalState === "0") return "#FF4355"; // 审批中
        if (this.approvalData.approvalState === "-1") return "#FFAD0E";// 拒绝
      },
      // taskState: "", //携带到巡视设备列表 做返回参数
      // taskStateName: "", //携带到巡视设备列表 做返回参数
      taskId: "", //携带到巡视设备列表 做返回参数
      neId: "",
    };
  },
  computed: {
    ...mapGetters(["userData", "roleAuth"])
  },
  onLoad(options) {
    // this.taskState = options.taskState;
    this.taskId = options.objId;
    // this.taskStateName = options.taskStateName;
    this.getTemporaryDetails();
  },
  methods: {
    submitApproval ({radio, determineResult}) {
      let params = {
        "userId":  this.userData.userId, // 是	string	登录用户ID
        "userName":  this.userData.userName, // 是	string	登录用户名称
        "roleId": this.userData.roleId, // 是	string	登录用户权限ID
        "approvalState": radio,
        "approvalTim": moment().format("YYYY-MM-DD HH:mm"),
        "approvalRemark": determineResult,
        "objIdList": [
          this.taskId
        ]
      }
      this.$api.submitApproval(params).then(res => {
        if (res.code === 0) {
          Dialog.alert({
            message: "审批成功"
          }).then(() => {
            this.goBack(); // 审批完成跳转回审批列表
          });
        }
      })
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/workBench/taskApproval/taskApproval'
      });
    },
    // 获取审批详情
    getTemporaryDetails() {
      this.$api.temporaryDetails({objId: this.taskId}).then(res => {
        this.baseInfoData = [
          {
            title: "工单名称",
            value: res.data.name
          },
          {
            title: "巡视站点名称",
            value: res.data.siteName
          },
          {
            title: "计划巡视时间",
            value: moment(res.data.planStartTime).format("YYYY-MM-DD HH:mm") + "～" + moment(res.data.planEndTime).format("YYYY-MM-DD HH:mm")
          },
          {
            title: "备注",
            value: res.data.remark
          },
        ];
        // this.approvalData = {
        //   operName: res.data.operName, // string	发起人名称
        //   receiveTime: res.data.receiveTime, // object	发起时间
        //   approvalTime: res.data.approvalTime, // object	发起时间
        //   approvalOperName: res.data.approvalOperName, // object	审批人名称
        //   approvalState: res.data.approvalState, // string	审批状态
        //   approvalStateName: res.data.approvalStateName, // string	审批状态名称
        //   approvalRemark: res.data.approvalRemark, // string	审批意见
        //   taskState: res.data.taskState, // string	任务状态（空字符，0已作废，-1已撤销）
        //   taskStateName: res.data.taskStateName, // string	空字符，已作废，已撤销
        // };
        this.approvalData = res.data;
        if(res.data.approvalState !== '0') {
          this.approvalActive = 1;
        }
        if(['SUPERMANAGE'].includes(this.roleAuth) || res.data.approvalState !== '0') {
          this.showButton = false;
        }
      })
    },
    confirm() {// 点击审批
      this.showApproval = true;
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    background-color: #F8F8F8;
    
    /deep/ .van-cell {
      font-size: px2vw(42);
    }
    
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    
    .base-info-container, .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      
      /deep/ .van-cell__title {
        color: #666;
      }
      
      /deep/ .van-cell__value {
        color: #333;
      }
    }
    
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
      
      .plate-title-right {
        transform: rotateZ(30deg);
        color: #808080;
      }
    }
    
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }
    }
  
    /deep/ .van-button {
      margin-top: px2vh(60);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
    
  }
}
</style>